<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>图像缩放</title>
    <link rel="stylesheet" href="/css/pic/common.css"/>
    <style>
        .img-container {
            margin-top: 30px;
            overflow: hidden;
        }

        .source-img {
            float: left;
            width: 49%;
            border: 1px solid #000;
        }

        .handle-img {
            float: right;
            width: 49%;
            border: 1px solid #000;
        }

        .btn-block {
            margin: 5px;
            padding: 5px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
<div>
    <input type="file" id="imgFile">
    <div class="btn-block">
        <button id="btn_changemime">切换MIME</button>
        <button id="btn_canvas">canvas自带</button>
        <button id="btn_nearst">最邻近插值</button>
        <button id="btn_bilinear">双线性差值</button>
        <button id="btn_bicubic">三次卷积插值</button>
        <button id="btn_bicubic2">三次卷积插值2</button>
    </div>
    <div class="img-container">
        <img class="source-img" data-preview-src="" data-preview-group="1"/>
        <canvas class="handle-img"></canvas>
    </div>
</div>
<script type="text/javascript" src="/js/picjs/fileinput.js"></script>
<script type="text/javascript" src="/js/picjs/image-scale.js"></script>
<script>
    var sourceImg;
    var canvasHandle;
    var ctxHandle;
    var sourceImage;
    var sourceBase64;
    var mime = 'image/png';

    initPage();

    function initPage() {
        initParams();
        initListeners();
        initImg();
    }

    function initParams() {
        sourceImg = document.querySelector('.source-img');
        canvasHandle = document.querySelector('.handle-img');
        ctxHandle = canvasHandle.getContext('2d');
    }

    function initListeners() {
        document.getElementById('btn_canvas').addEventListener('click', function (e) {
            processImg(sourceImage, false);
        });
        document.getElementById('btn_nearst').addEventListener('click', function (e) {
            processImg(sourceImage, 0);
        });
        document.getElementById('btn_bilinear').addEventListener('click', function (e) {
            processImg(sourceImage, 1);
        });
        document.getElementById('btn_bicubic').addEventListener('click', function (e) {
            processImg(sourceImage, 2);
        });
        document.getElementById('btn_bicubic2').addEventListener('click', function (e) {
            processImg(sourceImage, 3);
        });
        document.getElementById('btn_changemime').addEventListener('click', function (e) {
            if (mime === 'image/png') {
                mime = 'image/jpeg';
            } else {
                mime = 'image/png';
            }
        });
    }

    function initImg() {
        new FileInput({
            container: '#imgFile',
            isMulti: false,
            type: 'Image_Camera',
            success: function (b64, file, detail) {
                console.log("选择:" + b64);
                console.log("fileName:" + file.name);

                loadImg(b64);
            },
            error: function (error) {
                console.error(error);
            }
        });
    }

    function loadImg(b64) {
        sourceImg.src = b64;

        var img = new Image();

        img.src = b64;

        img.onload = function () {
            sourceBase64 = b64;
            sourceImage = img;
        };
    }

    function processImg(img, processType) {
        if (!img) {
            alert('请选择原图');

            return;
        }

        var ratio = img.width / img.height;

        canvasHandle.width = canvasHandle.offsetWidth * 1;
        canvasHandle.height = canvasHandle.width / ratio;

        canvasHandle.style.width = canvasHandle.offsetWidth;
        canvasHandle.style.height = canvasHandle.offsetWidth / ratio;

        var newBase64;

        if (processType === false) {
            newBase64 = sourceBase64
        } else {
            newBase64 = ImageScale.scaleImage(img, {
                mime: mime,
                width: canvasHandle.width,
                height: canvasHandle.height,
                processType: processType || 0,
            });
        }

        var newImg = new Image();
        newImg.src = newBase64;

        newImg.onload = function () {
            ctxHandle.drawImage(newImg,
                0, 0,
                canvasHandle.width, canvasHandle.height,
            );

            console.log('压缩前w:' + img.width + ',h:' + img.height);
            console.log('压缩后w:' + newImg.width + ',h:' + newImg.height);
        };
    }
</script>
</body>

</html>